import React from "react";

import ReactECharts from "echarts-for-react";
import type { EChartsOption } from "echarts";

import {
  CockpitChartBaseProps,
  echartsCockpitTheme,
  lineChartTooltipCommonConfig,
} from "../helps/echartsCommon";

import { createRoot } from "react-dom/client";
import CustomChartTooltip, { ToolTipFonts } from "../customChartTooltip";
import { useIsMobile } from "../hooks/useIsMobile";

const tooltipRootDom = document.createElement("div");

const tooltipRoot = createRoot(tooltipRootDom);

export interface SettleComprehensiveAnalysisPieChart
  extends CockpitChartBaseProps {
  unitName?: string;
}

export const getSettleComprehensiveAnalysisPieChartOption = ({
  unitName,
  scale = 1,
  dataSource = [],
  isMobile,
}: SettleComprehensiveAnalysisPieChart): EChartsOption => {
  return {
    tooltip: {
      ...lineChartTooltipCommonConfig,
      trigger: "item",
      formatter: (params: any) => {
        console.log(params, "params");

        tooltipRoot.render(
          <CustomChartTooltip>
            <ToolTipFonts>
              <span
                dangerouslySetInnerHTML={{
                  __html: params?.marker || "",
                }}
              />
              {params?.name}
            </ToolTipFonts>
            <ToolTipFonts>
              {params?.value}
              {unitName}
              <span style={{ marginLeft: "10px" }}>{params?.percent}%</span>
            </ToolTipFonts>
          </CustomChartTooltip>
        );
        return tooltipRootDom;
      },
    },
    legend: {
      show: false,
    },
    title: {
      text: `单位：${unitName}`,
      top: 0,
      left: 0,
      textAlign: "left",
      textStyle: {
        color: "#AFBFE0",
        fontSize: 12,
      },
    },
    series: [
      {
        name: "待收款综合分析",
        type: "pie",
        radius: isMobile ? ["30%", "40%"] : ["40%", "50%"],
        color: ["#76ACF6", "#D5A479", "#8CDCB8"],

        avoidLabelOverlap: false,
        label: {
          rich: {
            name: {
              fontSize: 16,
              color: "#D5E7FF",
            },
            value3: {
              color: "#8CDCB8",
              fontSize: 16,
            },
            value2: {
              color: "#D5A479",
              fontSize: 16,
            },
            value1: {
              color: "#76ACF6",
              fontSize: 16,
            },
            percent: {
              fontSize: 12,
              padding: [0, 0, 0, 8],
              color: "#76ACF6",
            },
            percent1: {
              fontSize: 12,
              padding: [0, 0, 0, 8],
              color: "#76ACF6",
            },
            percent2: {
              fontSize: 12,
              padding: [0, 0, 0, 8],
              color: "#D5A479",
            },
            percent3: {
              fontSize: 12,
              padding: [0, 0, 0, 8],
              color: "#8CDCB8",
            },
          },
          position: "outer",
          padding: [0, -80, 0, -80],
          show: true,

          formatter: (params) => {
            console.log(params, "params");
            let valueRichKey = "";
            let percentRichKey = "";
            if (params.name == "展期金额") {
              valueRichKey = "value1";
              percentRichKey = "percent1";
            } else if (params.name == "逾期金额") {
              valueRichKey = "value2";
              percentRichKey = "percent2";
            } else {
              valueRichKey = "value3";
              percentRichKey = "percent3";
            }

            return `{${valueRichKey}|${params.value}}{${percentRichKey}|${
              params.percent || 0
            }%}\n{hr|}\n{name|${params.name}}`;
          },
        },

        labelLine: {
          show: true,
          length: 22 * scale,
          length2: 100 * scale,
          lineStyle: {
            color: "#899DBF",
          },
        },
        data: dataSource.map((d) => {
          const s = String(d.amount);
          const isNaN = String(s) == "NaN";
          const a = isNaN ? 0 : d.amount;
          return {
            ...d,
            value: a,
            amount: a,
          };
        }),
      },
    ],
  };
};

const SettleComprehensiveAnalysisPieChart = ({
  unitName = "",
  reactEChartsProps,
  dataSource = [],
}: SettleComprehensiveAnalysisPieChart) => {
  const isMobile = useIsMobile();
  return (
    <ReactECharts
      theme={echartsCockpitTheme}
      style={{
        height: "215px",
      }}
      {...reactEChartsProps}
      option={getSettleComprehensiveAnalysisPieChartOption({
        unitName,
        dataSource,
        isMobile,
      })}
    />
  );
};

export default SettleComprehensiveAnalysisPieChart;
